import React, { PureComponent } from 'react'
import { Button, InputNumber } from 'antd'
import _ from 'lodash'
import PropTypes from 'prop-types';
import { MultiSelectShelfSkuProductModal } from "@common/presentational/MultiSelectModal";
import getCdnUrl from "@utils/getCdnUrl";
import CustomizeTableProvide, { CustomizeTable, CustomizeTablePagination } from "@common/presentational/CustomizeTable";
import {priceRangePreview} from "@utils/priceConversion";
class WarehouseInventoryGoodsChoose extends PureComponent {
    static propTypes = {
        value: PropTypes.array,
        onChange: PropTypes.func
    }

    constructor(props) {
        super(props);

        this.state = {
            productList: props.value || []
        }

        this.tableRef = React.createRef()
        this.multiSelectModalRef = React.createRef()
        this.productRefs = {}
    }

    initTable() {
        this.tableRef.current?.initPage()
    }

    handleProductChange(value) {
        const { onChange } = this.props
        this.setState({
            productList: value
        }, () => {
            onChange && onChange(value)
        })
    }

    showAddProductModal() {
        this.multiSelectModalRef.current?.show()
    }

    deleteOrderItem(record) {
        const { productList } = this.state
        const product = _.cloneDeep(productList)
        const { onChange } = this.props
        const newList = product.filter(item => record.storage_key !== item.storage_key)
        this.setState({
            productList: newList
        }, () => {
            onChange && onChange(newList)
        })
    }

    changeField(record, field, value) {
        const { productList } = this.state
        const product = _.cloneDeep(productList)
        const { onChange } = this.props
        const newList = product.map(item => {
            if (item.storage_key === record.storage_key) {
                return {
                    ...item,
                    [field]: value
                }
            }
            return item
        })
        this.setState({
            productList: newList
        }, () => {
            onChange && onChange(newList)
        })
    }

    render() {
        const { productList } = this.state
        let total = 0
        productList.map(item => {
            total = total + (item.input_quantity || 0)
        })
        const columns = [{
            title: '商品',
            dataIndex: 'code',
            render: (text, record) =>
                <div className="warehouse-product-module-item">
                    <img src={getCdnUrl(record.title_pic)} alt="" className="warehouse-product-img" />
                    <div className="warehouse-product-info">
                        <div className="w-100 ft-14 ft-clr-md">{record.name}</div>
                        <div className="w-100 ft-12 ft-clr-l">{priceRangePreview(record.price_range)}</div>
                    </div>
                </div>
        }, {
            title: '盘点数量',
            dataIndex: 'input_quantity',
            render: (text, record) =>
                <span>
                    <InputNumber onChange={this.changeField.bind(this, record, 'input_quantity')}
                        min={0}
                        key={record.storage_key}
                        max={99999}
                        step={1}
                        value={text || ''}
                    />
                </span>
        }, {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record) =>
                <div className="flex-vertical-center">
                    <div className="mgr-8 ft-hover" onClick={this.deleteOrderItem.bind(this, record)}>删除</div>
                </div>
        }];
        return (
            <div className="warehouse-product-list-module">
                <div className="mgb-16">
                    <Button type="primary" className="button-small mgr-16" onClick={this.showAddProductModal.bind(this)} >添加商品</Button>
                    <span>共 <span className='ft-w600 ft-16'>{productList.length}</span> 种商品, 数量: <span className='ft-w600 ft-16'>{total}</span></span>
                </div>
                <CustomizeTableProvide ref={this.tableRef} tableKey="stockList" onChange={() => { }}>
                    <div className="table-list">
                        <CustomizeTable
                            columns={columns}
                            dataSource={productList || []}
                            pagination
                        />
                    </div>
                </CustomizeTableProvide>
                <MultiSelectShelfSkuProductModal
                    ref={this.multiSelectModalRef}
                    title="添加商品"
                    onChange={this.handleProductChange.bind(this)}
                    initSelectedInfo={productList}
                />
            </div>
        )
    }
}

export default WarehouseInventoryGoodsChoose